@import url('~@/styles/animations.less');
@import url('~@/styles/mixin.less');

.statistics {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 0 24px;
    color: #fff;
    background: url('~@/assets/report/department/statisticsBg.png') no-repeat center;
    background-size: cover;
    h5 {
        margin: 0;
        margin-top: 49px;
        font-size: 16px;
        font-weight: 400;
    }
    h3 {
        margin: 0;
        margin-top: 8px;
        font-weight: 500;
        font-size: 28px;
        line-height: 40px;
    }
    &_view {
        box-sizing: border-box;
        width: 327px;
        height: 249px;
        margin: 16px 0 24px 0;
        padding: 20px 17px 0 17px;
        background: linear-gradient(
            227deg,
            #eee 0%,
            #f7d7be 37%,
            #ffbcbc 52%,
            #fff 79%,
            rgba(255, 255, 255, 0) 100%
        );
        border-radius: 16px;
        opacity: 0.8;
        &_item {
            .flex();
            section {
                margin-right: 44px;
                font-size: 14px;
                .flex(flex-start,center);
                > div {
                    width: 8px;
                    height: 8px;
                    margin-right: 6px;
                    background: #b62dff;
                }
            }
            .qualified {
                > div {
                    background: #ff8252;
                }
            }
        }
        &_preview {
            width: 283px;
            height: 189px;
            margin-top: 13px;
        }
    }
    p {
        width: 100%;
        margin-bottom: 8px;
        font-size: 16px;
        text-align: end;
    }
}
